<template>
	<div class="layout-header">
		<div class="header-logo">
			<img src="@/global-assets/imgs/header-left-logo1.png" />
		</div>
		<!-- 菜单按钮 -->
		<ul class="header-menu">
			<li
				:key="item.id"
				v-for="item in menus"
				:class="['header-menu-item', props.topMenuFlag === item.code ? 'header-menu-item-active' : '']"
				@click="emits('click', item)"
			>
				<div class="header-menu-icon">
					<global-svg-icon :icon-name="item.title" width="38px" height="38px"></global-svg-icon>
				</div>
				<span>{{ item.title }}</span>
			</li>
		</ul>

		<a-dropdown :trigger="['hover']" @open-change="open">
			<div class="header-user">
				<div class="round">
					{{ g6InitialLetter(cUserInfo.userName) }}
				</div>
				<global-svg-icon class="svg-icon" :icon-name="iconName" width="16px" height="16px"></global-svg-icon>
			</div>
			<template #overlay>
				<a-menu @click="ClickAction">
					<a-menu-item key="logout">
						<a href="javascript:;">注销</a>
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
	</div>
</template>

<script setup lang="ts">
import { g6StorageValue, g6InitialLetter } from 'glasssix-utils-ts';
import type { TsLayout } from '../../types';

const props = withDefaults(defineProps<TsLayout.HeaderProps>(), {
	topMenuFlag: ''
});
const emits = defineEmits<{
	(e: 'click', item: TsGlobalType.TsRoleMenu): void;
	(e: 'logout'): void;
}>();

const ClickAction = (item: any): void => {
	if (item.key === 'logout') {
		emits('logout');
	}
};

// 获取保存在 sessionStorage 中的用户信息
const cUserInfo = computed(() => {
	const userInfo: TsUser = g6StorageValue.get('session', 'userInfo');
	if (userInfo) {
		const { userName, userNumber, phone } = userInfo;
		return { userName, userNumber, phone };
	}
	return { userName: '', userNumber: '', phone: '' };
});

const iconName = ref<string>('arrow-down-s-line');
const open = (val: any): void => {
	iconName.value = val ? 'icon-wrapper' : 'arrow-down-s-line';
};

const menus = ref<TsGlobalType.TsRoleMenu[]>([]);

if (Array.isArray(g6StorageValue.get('session', 'sysMenus'))) {
	menus.value = g6StorageValue.get('session', 'sysMenus') as TsGlobalType.TsRoleMenu[];
}
</script>

<style lang="less" scoped>
.layout-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	width: 100vw;
	min-width: 1440px;
	height: var(--layout-header);
	padding: 8px 24px 8px 0;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(
		90deg,
		rgba(48, 93, 194, 0.13) -3.82%,
		rgba(0, 129, 204, 0) -2.33%,
		rgba(0, 129, 204, 0) 67.94%,
		rgba(48, 93, 194, 0.13) 103.82%
	);
	box-shadow: 0 8px 6px 0 rgba(16, 17, 25, 0.16);

	.header-logo {
		position: relative;
		top: 8px;
		left: -5px;

		img {
			width: 494px;
		}
	}

	&::after {
		position: absolute;
		top: 63px;
		left: 410px;
		width: 100vw;
		height: 1px;
		background: linear-gradient(
			90deg,
			rgba(106, 161, 255, 0) -1.13%,
			rgba(190, 218, 255, 0.92) 13.9%,
			rgba(106, 161, 255, 0.92) 42.51%,
			rgba(0, 156, 248, 0) 102.5%
		);
		filter: drop-shadow(0 5.5px 3.5px rgba(5, 5, 7, 0.25));
		content: '';
	}

	&::before {
		position: absolute;
		top: 2px;
		left: 366px;
		width: 100vw;
		height: 5px;
		background: linear-gradient(180deg, rgba(21, 31, 55, 0.38) 95.6%, rgba(22, 93, 255, 0.38) 508.16%, rgba(106, 161, 255, 0.38) 827.11%),
			linear-gradient(180deg, rgba(23, 24, 32, 0.38) 92.68%, rgba(160, 167, 213, 0.38) 803.95%);
		content: '';
	}

	.header-menu {
		position: absolute;
		top: 0;
		left: 50%;
		display: flex;
		height: 64px;
		transform: translateX(-50%);
		align-items: center;
		gap: 24px;

		.header-menu-item {
			display: flex;
			width: 120px;
			font-family: TENGXIANGZHIHEIJIAN;
			font-size: 14px;
			font-weight: 400;
			color: @text03;
			transition: all 0.1s linear;
			cursor: pointer;
			align-items: center;

			> span {
				margin-left: 8px;
			}

			> .header-menu-icon {
				opacity: 0.7;
				transition: all 0.1s linear;
				transform: scale(1);
			}

			&:hover {
				color: @text01;
				text-shadow: 0 0 11px #bedaff;

				.header-menu-icon {
					opacity: 1;
				}
			}
		}
	}
}

.header-user {
	display: flex;
	height: 38px;
	margin-bottom: 6px;
	cursor: pointer;
	align-items: center;

	&:hover {
		.svg-icon {
			margin-top: 2px;
		}
	}

	.round {
		display: flex;
		width: 24px;
		height: 24px;
		margin-right: 4px;
		// border: 1px solid rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		font-size: 12px;
		color: rgba(255, 255, 255, 1);
		background: linear-gradient(180deg, #00429f 0%, #009cf8 100%), #fbe8ef;
		box-shadow: 0 1px 4px 0 rgba(2, 36, 59, 0.06);
		justify-content: center;
		align-items: center;
	}
}

#app .header-menu-item-active {
	font-size: 16px;
	color: @text01;
	text-shadow: 0 0 11px #bedaff;

	.header-menu-icon {
		opacity: 1;
		transform: scale(1.2);
	}
}
</style>
